<template>
  <ul class="desk-nav-bar">
    <li
      v-for="tab of tabs"
      :key="tab.name"
      :class="current === tab.name && 'active'"
      @click="handleJumpPage(tab)"
    >
      <i class="iconfont" :class="tab.icon"></i>
      {{ tab.label }}
    </li>
  </ul>
</template>

<script>
import i18n from '@src/locales'
export default {
  name: 'desk-nav-bar',
  props: {
    current: String,
  },
  data() {
    return {
      isOpen: false,
      tabs: [
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[0]'),
          name: 'deskSetting',
          icon: 'icon-reception',
          url: '/setting/serviceStation/main/deskSetting',
        },
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[1]'),
          name: 'eventType',
          icon: 'icon-event',
          url: '/setting/serviceStation/eventType',
        },
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[2]'),
          name: 'cardManage',
          icon: 'icon-add3',
          url: '/setting/serviceStation/cardManage',
        },
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[3]'),
          name: 'imSetting',
          icon: 'icon-customerservice',
          url: '/setting/serviceStation/main/im',
        },
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[4]'),
          name: 'callcenterSetting',
          icon: 'icon-dianhua',
          url: '/setting/serviceStation/main/callcenterSetting',
        },
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[5]'),
          name: 'serviceRemarkSetting',
          icon: 'icon-kefu1',
          url: '/setting/serviceStation/main/serviceRemarkSetting',
        },
        {
          label: i18n.t('event.setting.deskNavBar.tabsLabel[6]'),
          name: 'robotSetting',
          icon: 'icon-kefu1',
          url: '/setting/serviceStation/main/robotSetting',
        },
      ],
    };
  },
  mounted() {
    this.isOpen = localStorage.getItem('im_isOpen') == 1;
  },
  methods: {
    handleJumpPage({ name, url }) {
      let otherPages = new Set(['eventType', 'cardManage']);
      if (otherPages.has(name)) {
        // 页面切换
        window.location.href = `${this.$resourcePrefix}${url}`;
      } else {
        // 单页面路由
        this.$router.push(name);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
ul,
.desk-nav-bar {
  display: none;
  margin: 0;
  position: sticky;
  top: 0;
  width: 194px;
  min-width: 194px;
  padding: 20px 0 20px 30px;
  background: #ffffff;
  border-radius: 4px;
  list-style: none;
  overflow: auto;

  li {
    margin-bottom: 20px;
    font-size: 16px;
    color: #666666;
    cursor: pointer;
    &.active {
      font-weight: bold;
      color: $color-primary;
    }
    &:hover {
      color: $color-primary;
    }
  }
  .iconfont {
    font-size: 14px;
  }
}
</style>
